<template>
  <div class="about">
    <div class="tab">
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row>
          <el-col :span="4">
            <el-select
              size="small"
              v-model="typetValue"
              placeholder="请选择台球类型"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-select
              size="small"
              v-model="stateValue"
              placeholder="请选择台球状态"
            >
              <el-option
                v-for="item in states"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input
              size="small"
              v-model="searchName"
              placeholder="请输入查找的桌名"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="searchByName()"
              ></el-button>
            </el-input>
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="paginationList" border>
        <el-table-column
          prop="order_No"
          align="center"
          label="订单编号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="courts_table"
          align="center"
          label="台球号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="courts_type_name"
          align="center"
          label="类型"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="member_phone"
          align="center"
          label="会员号"
          width="175"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.member_phone != '游客'" type="success">{{
              scope.row.member_phone
            }}</el-tag>
            <el-tag v-if="scope.row.member_phone === '游客'" type="warning"
              >游客</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="total_amount"
          align="center"
          label="订单金额"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="payment_state"
          align="center"
          label="支付状态"
          width="125"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.payment_state === '已支付'" type="success"
              >已支付</el-tag
            >
            <el-tag v-if="scope.row.payment_state === '未支付'" type="danger"
              >未支付</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="order_time"
          align="center"
          label="开台时间"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="available_time"
          align="center"
          label="关台时间"
          width="200"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="isInvalidTime(scope.row.available_time)"
              type="warning"
              >还未结束</el-tag
            >
            <span v-else>{{ scope.row.available_time }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBlock" style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[7, 15, 20, 25]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next,jumper"
          :total="orderTableList.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      typetValue: "所有",
      stateValue: "所有",
      options: ["所有", "中8台球", "斯诺克"],
      states: ["所有", "已支付", "未支付"],
      searchName: "", //搜索的名字
      orderTableList: [], //台球桌集合
      paginationList: [], //分页后的数据
      currentPage: 1, //当前页码
      pageSize: 7, //每页的数据条数
    };
  },
  methods: {
    // 测试提交
    // 搜索
    searchByName() {
      if (
        this.searchName === "" &&
        this.typetValue === "所有" &&
        this.stateValue === "所有"
      ) {
        console.log("查找全部");
        this.getlivestockInfo();
      } else {
        console.log("通过条件查找");
        var params = new URLSearchParams();
        let that = this;
        params.append("courts_table", this.searchName);
        params.append("courts_type_name", this.typetValue);
        params.append("payment_state", this.stateValue);
        this.$axios
          .post("/getCourtsByInfo", params) //通过URL传参
          .then((res) => {
            //请求成功
            that.orderTableList = res.data;
            //日期转换格式
            for (let order of that.orderTableList) {
              const order_time = new Date(order.order_time);
              const available_time = new Date(order.available_time);
              order.order_time = that.timeProcessing(order_time);
              order.available_time = that.timeProcessing(available_time);
            }
            //刷新分页
            that.getPageData();
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    //获取全部数据
    getlivestockInfo() {
      let that = this;
      that.$axios
        .get("/getOrdersAll") //补上后台接口即可
        .then((res) => {
          // 请求成功
          that.orderTableList = res.data;
          console.log(res.data);
          //日期转换格式
          for (let order of that.orderTableList) {
            const order_time = new Date(order.order_time);
            const available_time = new Date(order.available_time);
            order.order_time = that.timeProcessing(order_time);
            order.available_time = that.timeProcessing(available_time);
          }
          // 获取页面数据后立马调用下面函数
          that.getPageData();
          return;
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPageData();
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPageData();
    },
    // 获取分页之后的数据
    getPageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      this.paginationList = this.orderTableList.slice(start, end);
    },
    //处理时间日期格式方法
    timeProcessing(dateObj) {
      //日期转换格式
      const year = dateObj.getFullYear();
      const month = String(dateObj.getMonth() + 1).padStart(2, "0");
      const day = String(dateObj.getDate()).padStart(2, "0");
      const hours = dateObj.getHours(); // 获取小时
      const minutes = dateObj.getMinutes(); // 获取分钟
      const seconds = dateObj.getSeconds(); // 获取秒数
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
    isInvalidTime(timeStr) {
      // 将时间字符串按照 "yyyy-MM-dd HH:mm:ss" 格式进行切割
      const timeParts = (timeStr || "").split(" ");
      const dateParts = timeParts[0].split("-");
      const timeParts2 = timeParts[1] ? timeParts[1].split(":") : [];

      // 判断每个部分是否都是NaN
      return (
        dateParts.some((part) => isNaN(part)) ||
        timeParts2.some((part) => isNaN(part))
      );
    },
  },
  mounted() {
    this.getlivestockInfo();
  },
};
</script>
<style scoped>
.paginationBlock {
  margin-left: 90px;
}
.el-card .el-col {
  margin-right: 8px;
}
.allocationRoleDialog .el-dialog__body {
  padding: 15px 35px;
}
</style>
